<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${article.title} - ${site.name}</title>
    <meta name="description" content="${article.articleExt.seoDescription}">
    <meta name="keywords" content="${article.articleExt.seoKeywords}">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f0f2f5;
        }

        .notice-container {
            max-width: 800px;
            margin: 20px auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .notice-header {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
        }

        .notice-header::before {
            content: '📢';
            font-size: 40px;
            position: absolute;
            top: 20px;
            left: 30px;
            opacity: 0.3;
        }

        .notice-badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 14px;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .notice-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .notice-number {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .notice-meta {
            display: flex;
            justify-content: center;
            gap: 25px;
            font-size: 14px;
            opacity: 0.9;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .notice-urgent {
            background: #ff4757;
            color: white;
            padding: 15px 30px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            border-left: 5px solid #ff3742;
        }

        .notice-urgent::before {
            content: '⚠️ ';
            margin-right: 10px;
        }

        .notice-content-wrapper {
            padding: 40px;
        }

        .notice-summary {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 500;
        }

        .notice-summary h4 {
            color: #856404;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .notice-content {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .notice-content h2 {
            color: #ff6b6b;
            font-size: 22px;
            margin: 30px 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ffe8e8;
        }

        .notice-content h3 {
            color: #555;
            font-size: 18px;
            margin: 25px 0 12px 0;
        }

        .notice-content p {
            margin-bottom: 18px;
            text-align: justify;
        }

        .notice-content ul,
        .notice-content ol {
            margin: 20px 0;
            padding-left: 30px;
        }

        .notice-content li {
            margin-bottom: 10px;
        }

        .notice-content blockquote {
            border-left: 4px solid #ff6b6b;
            padding: 20px 25px;
            margin: 25px 0;
            background: #fff5f5;
            font-style: italic;
        }

        .notice-important {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
        }

        .notice-important h4 {
            color: #0c5460;
            margin-bottom: 10px;
        }

        .notice-important::before {
            content: '💡 ';
            font-size: 18px;
        }

        .notice-requirements {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 25px;
            margin: 25px 0;
        }

        .notice-requirements h4 {
            color: #495057;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .notice-requirements ul {
            margin: 0;
            padding-left: 20px;
        }

        .notice-requirements li {
            margin-bottom: 8px;
            position: relative;
        }

        .notice-requirements li::marker {
            content: '✓ ';
            color: #28a745;
            font-weight: bold;
        }

        .notice-footer {
            background: #f8f9fa;
            padding: 30px 40px;
            border-top: 1px solid #e9ecef;
        }

        .notice-signature {
            text-align: right;
            margin-bottom: 20px;
            font-size: 16px;
        }

        .notice-signature .department {
            font-weight: bold;
            color: #555;
            margin-bottom: 5px;
        }

        .notice-signature .date {
            color: #666;
            font-size: 14px;
        }

        .notice-contact {
            background: #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .notice-contact h4 {
            color: #495057;
            margin-bottom: 10px;
        }

        .notice-contact p {
            margin: 5px 0;
            font-size: 14px;
        }

        .notice-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #666;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
        }

        .breadcrumb {
            background: #e9ecef;
            padding: 15px 40px;
            font-size: 14px;
        }

        .breadcrumb a {
            color: #ff6b6b;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .notice-container {
                margin: 10px;
                border-radius: 8px;
            }

            .notice-header {
                padding: 20px;
            }

            .notice-title {
                font-size: 22px;
            }

            .notice-content-wrapper,
            .notice-footer,
            .breadcrumb {
                padding: 20px;
            }

            .notice-meta {
                flex-direction: column;
                gap: 10px;
            }

            .notice-stats {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="notice-container">
        <!-- 面包屑导航 -->
        <nav class="breadcrumb">
            <a href="/">首页</a> > 
            <a href="/portal/channel/${article.channelId}">${article.channel.name}</a> > 
            ${article.title}
        </nav>

        <!-- 公告头部 -->
        <header class="notice-header">
            <div class="notice-badge">重要公告</div>
            <h1 class="notice-title">${article.title}</h1>
            <#if article.alias??>
                <div class="notice-number">公告编号：${article.alias}</div>
            </#if>
            
            <div class="notice-meta">
                <span class="meta-item">
                    <span>📝</span>
                    <span>发布部门：${article.author!'管理部门'}</span>
                </span>
                <span class="meta-item">
                    <span>📅</span>
                    <span>发布时间：${article.publishDate?string('yyyy年MM月dd日')}</span>
                </span>
                <span class="meta-item">
                    <span>👁️</span>
                    <span>浏览次数：${article.views}</span>
                </span>
            </div>
        </header>

        <!-- 紧急提示 -->
        <#if article.status == 5>
            <div class="notice-urgent">
                紧急公告：请相关人员立即关注并按要求执行！
            </div>
        </#if>

        <!-- 公告内容 -->
        <div class="notice-content-wrapper">
            <!-- 公告摘要 -->
            <#if article.subtitle??>
                <div class="notice-summary">
                    <h4>📋 公告摘要</h4>
                    <p>${article.subtitle}</p>
                </div>
            </#if>

            <!-- 正文内容 -->
            <div class="notice-content">
                ${article.articleExt.content}
            </div>

            <!-- 重要提示 -->
            <div class="notice-important">
                <h4>重要提示</h4>
                <p>请各相关部门和人员认真阅读本公告内容，严格按照要求执行。如有疑问，请及时联系相关负责人。</p>
            </div>

            <!-- 执行要求 -->
            <div class="notice-requirements">
                <h4>📋 执行要求</h4>
                <ul>
                    <li>请各部门负责人组织学习本公告内容</li>
                    <li>严格按照公告要求执行相关工作</li>
                    <li>如有问题及时向上级部门反馈</li>
                    <li>确保公告内容传达到每一位相关人员</li>
                </ul>
            </div>
        </div>

        <!-- 公告底部 -->
        <footer class="notice-footer">
            <!-- 联系方式 -->
            <div class="notice-contact">
                <h4>📞 联系方式</h4>
                <p>如有疑问，请联系：</p>
                <p>联系人：${article.editor!'办公室'}</p>
                <p>电话：${article.source!'010-12345678'}</p>
                <p>邮箱：contact@${site.domain!'example.com'}</p>
            </div>

            <!-- 发布署名 -->
            <div class="notice-signature">
                <div class="department">${article.author!'管理部门'}</div>
                <div class="date">${article.publishDate?string('yyyy年MM月dd日')}</div>
            </div>

            <!-- 统计信息 -->
            <div class="notice-stats">
                <div>
                    <span>发布时间：${article.publishDate?string('yyyy-MM-dd HH:mm')}</span>
                    <span style="margin-left: 20px;">最后更新：${article.updateDate?string('yyyy-MM-dd HH:mm')}</span>
                </div>
                <div>
                    <span>浏览：${article.views} 次</span>
                    <span style="margin-left: 20px;">收藏：${article.favorites} 次</span>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
